<template>
  <!-- 首页 -->
  <div>
    <!-- 定义页面结构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="易洁家政" />
      </van-sticky>
    </div>
    <!-- 顶部轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(category, index) in categoryData"
          :key="category.id"
          :icon="category.icon"
          :text="category.name"
          @click="toProduct(category.id, index)"
        />
      </van-grid>
    </div>
    <!-- {{ productData }} -->
    <!-- 底部展示区域 -->
    <div class="product">
      <van-card
        v-for="product in productData"
        :key="product.id"
        :price="product.price + '.00'"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </div>
    <div class="footer" style="height: 100px"></div>
  </div>
</template>

<script>
// 引入axios
import { get, post, post_json } from "@/http/axios";
// 引用vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      // 轮播图数组
      swipeData: [],
    };
  },
  //计算属性 类似于data概念
  computed: {
    // 引入栏目数据
    ...mapState("category", ["categoryData"]),
    // 引入产品数据
    ...mapState("product", ["productData"]),
  },
  //方法集合
  methods: {
    // 引入category vuex中的方法
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入product vuex中的方法
    ...mapActions("product", ["getAllProductData"]),
    // 获取所有轮播图的数据
    async getAllSwipeData() {
      let res = await get("/carousel/query", { status: "正常" });
      // 将拿到的数据赋值给轮播图数组
      this.swipeData = res.data.data;
    },
    // 查询栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 5,
      };
      // 调用vuex中的方法 参数
      this.getAllCategoryData(data);
    },
    // 获取产品数据
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 8,
      };
      // 调用vuex中的方法 参数
      this.getAllProductData(data);
    },
    // 跳转到产品页面 并且传递参数
    toProduct(categoryId, activeKey) {
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path: "/manager/product",
        // 参数的传递
        query: {
          categoryId,
          activeKey,
        },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 自动获取轮播图的数据
    this.getAllSwipeData();
    // 自动获取栏目数据
    this.queryCategory();
    this.queryProduct();
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 设置轮播区域的样式 */
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 200px;
}
</style>